import useAntdList from '@/hooks/useAntdList';
import { queryAccount } from '@/service/globalSetting';
import { Button, Card, Form, Space, Table, Tabs, message } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React from 'react';
import SaveModal from './SaveModal';
import useAntdModal from '@/hooks/useAntdModal';
import { queryI18nAppLink, syncAppLink } from '@/service/deliver';
import useQuery from '@/hooks/useQuery';
import QueryFilter from '@/components/QueryFilter';
const App = () => {
  const { id } = useQuery()
  let [form] = Form.useForm()
  const { tableProps, tabsProps, refresh,search } = useAntdList(queryI18nAppLink, { defaultTabsActiveKey: 'dev', tabsKey: 'env' })
  const saveModal = useAntdModal({ refresh });
  const columns: ColumnsType<any> = [{
    title: '中文',
    dataIndex: 'zhCh'
  }, {
    title: '英文',
    dataIndex: 'enUs'
  }, {
    title: '操作',
    render(v) {
      return <Space>
        {tabsProps.activeKey === 'dev' && <Button onClick={() => saveModal.openModal({ ...v }, { title: '编辑文本' })} type="link">编辑</Button>}

      </Space>
    }
  }
  ]
  const _syncAppLink = async (item) => {
    await syncAppLink({ ...item })
    message.success('同步成功')
  }
  return (<Card>
    <QueryFilter
    items={[{
      label:'文本',
      name:'name'
    }]}
    form={form} reset={search.reset} submit={search.submit}    
    />
    <SaveModal {...saveModal} />
    <Tabs
      {...tabsProps}
      tabBarExtraContent={
        <Space>
          {tabsProps.activeKey === 'dev' && <>
            <Button onClick={() => saveModal.openModal({ appId: id, }, { title: '新增文本' })} >新增文本</Button>
            <Button onClick={() => _syncAppLink({ appId: id, fromEnv: 'dev', toEnv: 'test' })} type='primary'>发布测试</Button>
          </>}
          {tabsProps.activeKey === 'test' && <>
            <Button onClick={() => _syncAppLink({ appId: id, fromEnv: 'test', toEnv: 'prod' })} type='primary'>发布线上</Button>
          </>
          }
        </Space>
      }
      items={[{
        label: '开发环境',
        key: 'dev'
      }, {
        label: '测试环境',
        key: 'test'
      }, {
        label: '线下环境',
        key: 'prod'
      }]}
    />
    <Table columns={columns} {...tableProps} />
  </Card>)
}
export default App